<template>
  <n-grid :cols="4" :x-gap="12" :y-gap="gridSpace">
    <n-gi :span="1">
      <TaskDataTable :data="todayTask" :columns="todayTaskColumns" :table-max-height="tableMaxHeight"
                     :style="'width: 500px'"/>
    </n-gi>
    <n-gi :span="4">
      <TaskDataTable :data="allTask" :columns="allTaskColumns" :table-max-height="tableMaxHeight"/>
    </n-gi>
  </n-grid>
</template>

<script setup>

import TaskDataTable from "../components/task/TaskDataTable.vue";
import {h, inject, onMounted, ref} from "vue";
import {NButton, NTag} from "naive-ui";
import {Circle, CircleCheck} from "@vicons/tabler";
import {getSelfTask} from "../api/taskApi.js";

onMounted(() => {
  loadTodayTask()
  loadAllTask()
})

const getStatusTagType = inject('getStatusTagType')

const todayTaskColumns = ref([
  {
    title: '状态',
    key: 'statusName',
    align: 'center',
    titleAlign: 'center',
    width: 80,
    render(row) {
      return h(
          NTag, {
            type: getStatusTagType(row.status.code)
          },
          {default: () => row.status.name}
      )
    }
  },
  {
    title: '待办',
    key: 'task',
    align: 'center',
    titleAlign: 'center',
    render(row) {
      return h(
          'p', {
            style: {
              textDecoration: row.status.code === 2 ? 'line-through' : ''
            }
          },
          {
            default: () => row.title
          }
      )
    }
  }
])
const todayTask = ref([])

const allTaskColumns = ref([
  {
    title: '状态',
    key: 'statusName',
    align: 'center',
    titleAlign: 'center',
    width: 80,
    render(row) {
      return h(
          NTag, {
            type: getStatusTagType(row.status.code)
          },
          {default: () => row.status.name}
      )
    }
  },
  {
    title: '待办',
    key: 'title',
    align: 'center',
    titleAlign: 'center',
    width: window.innerWidth * 0.1,
    ellipsis: {
      tooltip: true
    },
  },
  {
    title: '详情',
    key: 'content',
    align: 'center',
    titleAlign: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '添加日期',
    key: 'createAt',
    align: 'center',
    titleAlign: 'center',
    width: 120
  }
])
const allTask = ref([])

const tableMaxHeight = ref(window.innerHeight * 0.25)
const gridSpace = ref(window.innerHeight * 0.05)

const searchTaskObj = ref({
  page: 1,
  limit: 10,
  text: null,
  status: null,
  createAt: null,
  needContent: true
})

function loadTodayTask() {
  getSelfTask({
    page: -1,
    limit: -1,
    createAt: new Date().getTime(),
  }).then(resp => {
    todayTask.value = resp.data.item
  }).catch(err => {
    console.log(err)
  })
}


function loadAllTask() {
  getSelfTask(searchTaskObj.value).then(resp => {
    allTask.value = resp.data.item
  }).catch(err => {
    console.log(err)
  })
}

</script>

<style scoped>

</style>